<template>
  <div class="main-contain">
    <div class="title-contain">
      <div class="logo">
        <el-image :src="logoUrl" fit="contain" v-on:click="go2Index"></el-image>
      </div>
      <div class="title">
        <p>注册窗口</p>
      </div>
    </div>
    <div class="regist-contain">
      <div class="regist">
        <el-form label-position="left" :model="registForm" label-width="100px" size="small" class="registForm" id="registForm">

          <el-form-item label="用户名">
            <el-input v-model="registForm.username"></el-input>
          </el-form-item>

          <el-form-item label="联系电话">
            <el-input v-model="registForm.tel"/>
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="registForm.email" type="email"/>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="registForm.password" type="password"/>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="registForm.confirm" type="password"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-contain">
        <el-button type="warning" class="btn hvr-grow" @click="callbackName">注册</el-button>
        <el-link href="/index/home" :underline="false" class="backLink hvr-bounce-in">返回登录</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
import {regist} from "../../api/api";

export default {
  name: "Index",
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  data(){
    return{
      registForm:{
        username:'',
        password:'',
        confirm:'',
        email:'',
        tel: '',
      },
      ip: '123',
      randstr: '',
      Ticket: '',
      appid: '',
      logoUrl: 'https://gitee.com/Kolvzaki/pics/raw/master/img/logo.png'
    }
  },
  methods:{
    regist: function (){
      regist({
        ...this.registForm
      },{})
      .then(res=>{
        if (res.ret=== "0"){
          ElMessage.success({
            type: 'success',
            message: res.description
          })
          this.$router.push('/index/home')
        }else{
          ElMessage.error({
            type: 'error',
            message: res.description
          })
        }
      })
    },
    go2Index: function (){
      this.$router.push('/index/home')
    },
    callbackName: function () {
      let appid = '2067963886'; // 腾讯云控制台中对应这个项目的 appid
      //生成一个滑块验证码对象
      let captcha = new TencentCaptcha(appid, res => {
        // 用户滑动结束或者关闭弹窗，腾讯返回的内容
        console.log(res)
        if (res.ret === 0) {
            this.ip = returnCitySN["cip"]
            this.Ticket = res.ticket
            this.appid = res.appid
            this.randstr = res.randstr
            //验证验证码票据
            axios.get('http://119.23.73.128:80/user/DescribeCaptchaResult?Ticket=' + this.Ticket + '&CaptchaAppId=' + this.appid + '&Randstr=' + this.randstr + '&ip=' + this.ip)
                .then(res => {
                  // 后台验证通过，返回用户信息
                  // 前端接收并登陆系统
                  console.log(res)
                  if (res.data.CaptchaCode === 1) {
                    this.regist()
                  } else {
                    alert("请先完成验证!")
                  }
                }).catch(err => {
              // 验证失败
              console.log(err)
              ElMessage.error({
                type: 'error',
                message: err
              })
            })
          // })
        } else {
          // 提示用户完成验证
          ElMessage.warning({
            type: 'warning',
            message: res.description
          })
        }
      });
      // 滑块显示
      captcha.show();
    }
  }
}
</script>

<style scoped>
.regist-contain{
  width: 400px;
  height: 350px;
  margin: 80px auto 0;
  position: relative;
  border: 1px solid #343a40;
  border-radius: 30px;
  background: inherit;
  box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 1;
}
.regist-contain:before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  filter: blur(5px);
  background:inherit;
  z-index: -1;
  margin: -30px;
}

.main-contain{
  position: absolute;
  background:url('../../assets/background.jpg') 0 / cover fixed;
  width: 100%;
  height: 100%;
}
body,.main-contain::before{
  width: 100%;
  height: 100%;
  background:url('../../assets/background.jpg') 0 / cover fixed
}

p{
  color: #ffffff;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: bolder;
  letter-spacing: 0.1em;
  font-size: 40px;
}

::v-deep(.el-form-item__label){
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  letter-spacing: 0.15em;
  color: #ffffff;
}

::v-deep(.el-form-item__content){
  margin-right: 40px;
}

.regist {
  margin-top: 20px;
}

.registForm{
  position: relative;
  top: 10px;
  left: 15px;
}


.backLink{
  position: relative;
  left: 40px;
}


.el-form-item__label {
  font-size: 20px;
  color: #03e9f4;
}

.btn{
  font-size: 16px;
  letter-spacing: 0.15em;
  transition: 0.25s all;

}
.btn:hover{
  color: #f4f4f5;
  box-shadow: 2px 2px 5px #000;
}

.regist-contain a{
  text-decoration: none;
  font-size: 20px;
  color: #03e9f4;
  transition: 0.2s ease-in;
}

#go2Login:hover{
  color: white;
  letter-spacing: 0.15em;
  transition: 0.25s all ease-in-out;
  color: #f4f4f5;
}

.title-contain{
  position: relative;
  top: 70px;
  width: 300px;
  margin: 0 auto;
}
.logo{
  position: relative;
  cursor: pointer;
  top: 20px;
}
.btn-contain{
  width: fit-content;
  margin: 25px auto 0;
}


</style>
